<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span class="hand textactive">邮件模板</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable">
      <el-row type="flex" justify="center">
        <el-col :span="23" style="margin-top: 12px;">
          <el-row type="flex" justify="space-between">
            <el-col style="width: 220px;">
              <el-row>
                <el-col style="width: 214px;height: 100%;">
                  <div class="switchlist">
                    <el-switch
                      @change="switchdata"
                      v-model="dataOrModule"
                      inactive-color="#4e88dc"
                      active-color="#12ce66"
                      active-text="非通用模板"
                      inactive-text="通用模板"
                    ></el-switch>
                  </div>
                </el-col>
              </el-row>
              <div style="background-color: #f4f7f9;">
                <el-row type="flex" justify="center">
                  <el-col style="margin-top: 20px;" :span="20" class="mailtemp" v-if="dataOrModule">
                    <el-select
                      v-model="customerName"
                      style="height: 30px;margin-bottom: 15px;"
                      placeholder="请选择客户简称"
                      @change="selectname"
                    >
                      <el-option
                        v-for="item in customerNameList"
                        :key="item"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                    <el-select v-model="code" placeholder="请选择需求编号" @change="selectnum">
                      <el-option v-for="item in codelist" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                  </el-col>
                </el-row>

                <el-row
                  type="flex"
                  justify="center"
                  style="margin-top: 18px;margin-bottom: 18px;"
                  class="mailtemp"
                >
                  <el-col :span="20">
                    <el-checkbox-group v-model="checkList" @change="checknav">
                      <el-checkbox v-for="(item,index) in list" :label="item" :key="index"></el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col class="permiss1" style="margin-top: 38px;">
              <div style="background-color: #f4f7f9;margin-left: 20px;">
                <el-row type="flex" justify="center">
                  <el-col :span="23" style="margin-top: 15px;">
                    <div style="height: 22px;line-height: 22px;">
                      <i class="icon iconfont icon-ziduan"></i>
                      <h3 style="display: inline-block;">所需字段</h3>
                    </div>
                    <div v-if="Approvelist.length !== 0">
                      <draggable style="margin-top: 25px;" :list="Approvelist" @change="drap">
                        <div class="draglist" v-for="(item,index) in Approvelist" :key="index">
                          {{item.name}}
                          <el-dropdown
                            :hide-on-click="false"
                            class="drop"
                            trigger="click"
                            id="delete"
                            placement="bottom-start"
                          >
                            <span class="el-dropdown-link">
                              <i class="iconfont icon-gantanhao"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" class="dropcheck">
                              <el-dropdown-item>
                                <span @click="edit(item.id)">编辑</span>
                                <div class="bot"></div>
                              </el-dropdown-item>
                              <el-dropdown-item>
                                <span @click="deletetitle(item.id)">删除</span>
                                <div class="bot"></div>
                              </el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                        </div>
                      </draggable>
                    </div>
                    <div v-else>
                      <div style="text-align: center;">
                        <span class="el-table__empty-text">暂无数据!</span>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div
                style="background-color: #f4f7f9;margin-left: 20px;margin-top: 14px;"
                class="mailtemplate"
              >
                <el-row type="flex" justify="center">
                  <el-col :span="23" style="margin-top: 15px;">
                    <div style="height: 22px;line-height: 22px;">
                      <i class="icon iconfont icon-Documentpaperdraft"></i>
                      <h3 style="display: inline-block;">表格预览</h3>
                    </div>
                    <div
                      v-if="tablelist.length !== 0"
                      style="margin-top: 25px;margin-bottom: 28px;"
                    >
                      <el-table border style="background-color: #fff;">
                        <template v-for="(item,index) in tablelist">
                          <el-table-column
                            :resizable="flag"
                            :label="item.name"
                            :key="index"
                            :width="item.size"
                          ></el-table-column>
                        </template>
                      </el-table>
                     
                    </div>
                    <div v-else>
                      <div style="text-align: center;">
                        <span class="el-table__empty-text">暂无数据!</span>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="415px"
      :before-close="editClose"
      class="addP contentR workrecord1 addroledialog"
    >
      <div>
        <el-form label-position="top" :model="form" :rules="rule" ref="form">
          <el-form-item label="固定值">
            <el-input v-model.trim="form.fix" placeholder="请输入固定值" style="width: 274px"></el-input>
          </el-form-item>
          <el-form-item label="表格长度" prop="size">
            <el-input v-model.trim="form.size" placeholder="请输入表格长度" style="width: 274px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round :disabled="editdis" @click="editsend('form')">确 定</el-button>
        <el-button round @click="editClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="删除"
      :visible.sync="deletedialogVisible"
      width="30%"
      :before-close="deleteClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">确定删除该字段吗？</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round :disabled="deletedis" @click="deletesend">确 定</el-button>
        <el-button round @click="deleteClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择客户简称</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleClose">确 定</el-button>
        <el-button round @click="handleClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import draggable from "vuedraggable";

export default {
  name: "mailtemplate",
  data() {
    return {
      customerName: "",
      customerNameList: [],
      code: "",
      codelist: [],
      value1: "",
      dataOrModule: false,
      checkList: [],
      list: [],
      Approvelist: [],
      tablelist: [],
      dialogVisible: false,
      rule: {
        size: [
          { pattern: /^\d+$/, message: "宽度为正整数", trigger: "blur" }
        ]
      },
      editdis: false,
      form: {},
      deletedialogVisible: false,
      id: "",
      deleteid: "",
      flag: false,
      deletedis: false,
      errordialogVisible: false
    };
  },
  created() {
    this.getnavlist();

    this.getchecklist();

    this.getApproveTemplate();

    axios.post(this.url + "/mailTemplate/getCustomers").then(res => {
      this.unlogin(res.data.code);
      if (res.data.code == 200) {
        this.customerNameList = res.data.data;
      }
    });
  },
  methods: {
    //选择客户简称获取需求编号
    selectname() {
      axios
        .post(this.url + "/mailTemplate/getRequireNoByCustomer", {
          customerName: this.customerName
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.code = "";
            this.codelist = res.data.data;
            this.getchecklist();
            this.getApproveTemplate();
          }
        });
    },
    selectnum() {
      this.getApproveTemplate();
      this.getchecklist();
    },
    //获取多选按钮的数据
    getnavlist() {
      axios.post(this.url + "/mailTemplate/getToltalNameList").then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      });
    },
    // 获取已选按钮的数据
    getchecklist() {
      if (!this.dataOrModule) {
        axios.post(this.url + "/mailTemplate/getFix").then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.checkList = res.data.data;
          }
        });
      } else {
        axios
          .post(this.url + "/mailTemplate/getNamelist", {
            customerName: this.customerName,
            requireNum: this.code
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.checkList = res.data.data;
            }
          });
      }
    },
    // 选中或者取消选择多选按钮发送的请求
    checknav() {
      if (!this.dataOrModule) {
        axios
          .post(this.url + "/mailTemplate/insertMenu", {
            list: this.checkList
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              // this.getchecklist();
              this.getApproveTemplate();
            }
          });
      } else {
        if (this.customerName) {
          axios
            .post(this.url + "/mailTemplate/insertFMenu", {
              customerName: this.customerName,
              requireNum: this.code,
              list: this.checkList
            })
            .then(res => {
              this.unlogin(res.data.code);
              if (res.data.code == 200) {
                // this.getchecklist();
                this.getApproveTemplate();
              }
            });
        } else {
          this.errordialogVisible = true;
          document.documentElement.style.overflow = "hidden";
          // this.getchecklist();
          this.checkList = [];
        }
      }
    },
    // 获取所需字段的数据
    getApproveTemplate() {
      if (!this.dataOrModule) {
        axios.post(this.url + "/mailTemplate/getApproveTemplate").then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.Approvelist = res.data.data;
            this.tablelist = res.data.data;
          }
        });
      } else {
        axios
          .post(this.url + "/mailTemplate/getMailTemplate", {
            customerName: this.customerName,
            requireNum: this.code
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.Approvelist = res.data.data;
              this.tablelist = res.data.data;
            }
          });
      }
    },
    // 拖拽所需字段后发送的请求
    drap() {
      if (!this.dataOrModule) {
        axios
          .post(this.url + "/mailTemplate/adjustMailTemplate", {
            list: this.Approvelist
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.getApproveTemplate();
            }
          });
      } else {
        axios
          .post(this.url + "/mailTemplate/adjustFMailTemplate", {
            list: this.Approvelist,
            customerName: this.customerName,
            requireNum: this.code
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.getApproveTemplate();
            }
          });
      }
    },
    //点击编辑按钮触发事件
    edit(id) {
      this.id = id;
      this.dialogVisible = true;
      document.documentElement.style.overflow = "hidden";
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
      axios
        .post(this.url + "/mailTemplate/getDetailById", {
          id: this.id
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.form = res.data.data;
          }
        });
    },
    //点击删除按钮触发事件
    deletetitle(id) {
      this.deleteid = id;
      this.deletedialogVisible = true;
      document.documentElement.style.overflow = "hidden";
    },
    //通用模板和非通用模板的切换
    switchdata() {
      this.customerName = "";
      this.code = "";
      this.getchecklist();
      this.getApproveTemplate();
    },
    //关闭编辑弹出框
    editClose() {
      this.$refs.form.resetFields();
      this.dialogVisible = false;
      document.documentElement.style.overflow = "auto";
    },
    //发送编辑请求
    editsend(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.editdis = true;
          axios
            .post(this.url + "/mailTemplate/editById", {
              id: this.id,
              size: this.form.size,
              fix: this.form.fix
            })
            .then(res => {
              this.unlogin(res.data.code);
              if (res.data.code == 200) {
                this.editdis = false;
                this.dialogVisible = false;
                document.documentElement.style.overflow = "auto";
                this.getApproveTemplate();
              }
            });
        }
      });
    },
    //发送删除请求
    deletesend() {
      this.deletedis = true;
      axios
        .post(this.url + "/mailTemplate/delById", {
          id: this.deleteid
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.deletedis = false;
            this.deletedialogVisible = false;
            document.documentElement.style.overflow = "auto";
            this.getchecklist();
            this.getApproveTemplate();
          }
        });
    },
    //关闭删除弹出框
    deleteClose() {
      this.deleteid = "";
      this.deletedis = false;
      this.deletedialogVisible = false;
      document.documentElement.style.overflow = "auto";
    },
    //未选择当场行时的弹出框的关闭事件
    handleClose() {
      this.errordialogVisible = false;
      document.documentElement.style.overflow = "auto";
    }
  },
  components: {
    draggable
  }
};
</script>

<style scoped>
.posttable {
  min-height: 700px;
  background-color: #fff;
}

.title {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.switchlist {
  margin-left: 10px;
  margin-right: 10px;
  color: #b5b8ba;
  height: 38px;
  line-height: 38px;
}

#delete {
  cursor: pointer;
  position: absolute;
  top: -8px;
  right: -7px;
  color: #00a2e5;
  line-height: 1;
}

.draglist {
  position: relative;
  display: inline-block;
  border: 1px dashed #009fe9;
  text-align: center;
  height: 34px;
  line-height: 34px;
  padding-left: 34px;
  padding-right: 34px;
  margin-bottom: 28px;
  margin-right: 25px;
  background-color: #fff;
}

.icon {
  font-size: 20px;
  color: #0087db;
  margin-right: 18px;
}

@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .permiss1 {
    width: 86.33333%;
  }
}

@media only screen and (min-width: 1920px) {
  .permiss1 {
    width: 90%;
  }
}
</style>
